<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>


<table border="1">
    <tr>
        <td width="60px">照片</td>
        <td width="100px"><img id = "img" src="../2图片.webp" width="100px"></td>
    </tr>
    <tr>
        <td>姓名</td>
        <td id="name">XXX</td>
    </tr>
    <tr>
        <td>年龄</td>
        <td id="age">XXX</td>
    </tr>
    <tr>
        <td>好友</td>
        <td><ul id = ul></ul></td>
    </tr>
</table>

<input type="button" value="请求数据" onclick="fun()">

<script>
    function fun() {
        let arr = {imge:"../2图片.webp",name:"毛泽东",age:88,opp:["妮妮","店小二","成功"]};
        //获取页面中元素对象
            let imgs =  document.querySelector("#img");
            let names =  document.querySelector("#name");
            let ages =  document.querySelector("#age");
            let uls =  document.querySelector("#ul");
            //把对象中的数据添加到元素中

            imgs.src = arr.imge;
            names.innerTest = arr.name;
            ages.innerTest = arr.age;
            uls.innerTest = arr.opp;
            alert(names.innerTest+ages.innerTest+uls.innerTest);

            for (let item of arr.opp){
                let li = document.createElement("li");
                li.innerText = item;
                uls.append(li)
            }

    }


</script>


</body>
</html>